<template>
  <div id="home">
    <div class="search">
      <div :class="className" class="filterbox" :style="heights">
        <div class="search_header">
          <button @click="allPenreClick" class="all_genre"><i class="iconfont icon-quanbu"></i>全部分类</button>
          <i class="iconfont icon-jiantou_you"></i>
          <el-cascader
            size="small"
            ref="searchCascader"
            style="width: 500px"
            placeholder=""
            v-model.trim="searchValue"
            :options="materialList"
            :props="{
              multiple: true,
              checkStrictly: true,
              value: 'id',
              label: 'materialName',
              children: 'son'
            }"
            clearable
            collapse-tags
            @change="changeLabel"
            filterable
          ></el-cascader>
        </div>
        <div class="search_purchaser">
          <div class="label">
            <i>采&nbsp;购&nbsp;商&nbsp;：</i>
          </div>
          <div class="nav">
            <div :class="purchaserType == 'open' ? 'open' : 'packUp'">
              <span :class="purchaserIndex == null ? 'on' : ''" @click="purchaserSelect(null)">全部</span>
              <span
                :class="purchaserIndex == item.id ? 'on' : ''"
                v-for="item in purchaserList"
                :key="item.id"
                @click="purchaserSelect(item.id)"
                >{{ item.enterpriseName }}</span
              >
            </div>
            <el-button
              v-if="purchaserType == 'open'"
              @click="purchaserMoreBtn('packUp')"
              size="mini"
              class="commonBtn bidd_btn"
              >更多<i class="iconfont icon-arrow-bottom"></i
            ></el-button>
            <el-button
              v-if="purchaserType == 'packUp'"
              @click="purchaserMoreBtn('open')"
              size="mini"
              class="commonBtn bidd_btn"
              >收起<i class="iconfont icon-arrow-top"></i
            ></el-button>
          </div>
        </div>
        <div class="search_adderss">
          <div class="label">
            <i>交付地点：</i>
          </div>
          <div class="nav">
            <div :class="adderssType == 'open' ? 'open' : 'packUp'">
              <span :class="adderssIndex == null ? 'on' : ''" @click="adderssSelect(null, null)">全部</span>
              <span
                :class="adderssIndex == item.provinceId ? 'on' : ''"
                v-for="item in adderssList"
                :key="item.provinceId"
                @click="adderssSelect(item.provinceId, item.province)"
                >{{ item.province }}</span
              >
            </div>
            <el-button v-if="adderssType == 'open'" @click="adderssBtn('packUp')" size="mini" class="commonBtn bidd_btn"
              >更多<i class="iconfont icon-arrow-bottom"></i
            ></el-button>
            <el-button v-if="adderssType == 'packUp'" @click="adderssBtn('open')" size="mini" class="commonBtn bidd_btn"
              >收起<i class="iconfont icon-arrow-top"></i
            ></el-button>
          </div>
        </div>
        <div class="search_status">
          <div class="label">
            <i>招标状态：</i>
          </div>
          <div class="nav">
            <div>
              <span :class="statusIndex == null ? 'on' : ''" @click="statusSelect(null)">全部</span>
              <span
                :class="statusIndex == item.value ? 'on' : ''"
                v-for="item in statusList"
                :key="item.value"
                @click="statusSelect(item.value)"
                >{{ item.label }}</span
              >
            </div>
          </div>
        </div>
        <div class="search_price">
          <div class="label">
            <i>预估总价：</i>
          </div>
          <div class="nav">
            <div>
              <span :class="priceIndex == null ? 'on' : ''" @click="priceSelect(null)">全部</span>
              <span
                :class="priceIndex == item.value ? 'on' : ''"
                v-for="item in priceList"
                :key="item.value"
                @click="priceSelect(item.value)"
                >{{ item.label }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="search-btn">
        <el-button style="width: 100%" v-if="expand" @click="expandShrink" class="exportBtn openBtn">
          点击展开
          <i class="el-icon-bottom"></i>
        </el-button>
        <el-button style="width: 100%" v-else @click="expandShrink" class="exportBtn">
          收起部分收缩
          <i class="el-icon-top"></i>
        </el-button>
      </div>
      <div class="sort-nav">
        <div class="nav-left">
          <div @click="sortChange('start')">
            <span :class="{ active: releaseDateStatus != null }">发布日期</span>
            <span class="sort-icon">
              <i :class="{ active: releaseDateStatus === true }" class="el-icon-caret-top"></i>
              <i :class="{ active: releaseDateStatus === false }" class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div @click="sortChange('end')">
            <span :class="{ active: bidDatelineStatus != null }">投标截止日期</span>
            <span class="sort-icon">
              <i :class="{ active: bidDatelineStatus === true }" class="el-icon-caret-top"></i>
              <i :class="{ active: bidDatelineStatus === false }" class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div @click="sortChange('price')">
            <span :class="{ active: estimateTotalPriceStatus != null }">预估总价</span>
            <span class="sort-icon">
              <i :class="{ active: estimateTotalPriceStatus === true }" class="el-icon-caret-top"></i>
              <i :class="{ active: estimateTotalPriceStatus === false }" class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div style="cursor: default">
            <el-select v-model.trim="value" placeholder="" class="timeselect" @change="timeChange" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </div>
        <div class="nav-right">
          <div style="width: 86px; height: 100%; cursor: pointer" @click="menuTab(1)">
            <i :class="{ active: menutype === 1 }" class="iconfont icon-xiangmubiaoqian"> </i>
          </div>
          <div style="width: 86px; height: 100%; cursor: pointer" @click="menuTab(2)">
            <i :class="{ active: menutype === 2 }" class="iconfont icon-bianjikuangwuxuliebiao17"> </i>
          </div>
          <div style="width: 148px; height: 100%">
            <span class="nav-pag" @click="reducePage" :style="page === 1 ? pageDisStyle : pageCliStyle">
              <i class="el-icon-caret-left"></i>
            </span>

            <span style="color: #fa7355; font-size: 18px"> {{ page }} </span>
            /{{ pages }}
            <span class="nav-pag" @click="increasePage" :style="page >= pages ? pageDisStyle : pageCliStyle">
              <i class="el-icon-caret-right"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="nocontent_bg" v-show="!total">
        <el-image :src="require('@/assets/role_bg2.png')"></el-image>
        <p style="color: #999999">暂无招标信息</p>
      </div>
      <div class="list-content" v-show="menutype === 1 && total">
        <div class="list_itembox">
          <div
            v-for="(item, index) in buyersList"
            :key="item.id"
            :class="{ four: (index + 1) % 4 === 0 }"
            class="card-list"
          >
            <div class="card-header">
              <span class="card-type-succ card-type" v-if="item.processSon === 2"> 招标中 </span>
              <span class="card-type-err card-type" v-else-if="item.processSon === 50 || item.processSon === 51">
                已中标
              </span>
              <span class="card-type-warn card-type" v-else-if="item.processSon === 5"> 已入围 </span>
              <span
                class="card-type-defa card-type"
                v-else-if="item.processSon === 60 || item.processSon === 61 || item.processSon === 62"
              >
                已流标
              </span>
              <span class="card-type-defa card-type" v-else-if="item.processSon === 3"> 已截标 </span>
              <span class="materialinfo">
                <el-tooltip effect="light" :content="item.materialInfo" placement="top">
                  <span>{{ item.materialInfo }}</span>
                </el-tooltip>
              </span>
            </div>
            <div class="card-main">
              <p class="con-label">
                <span>招标编号:</span><span>{{ item.biddingNo }}</span>
              </p>
              <div class="con-label company_label_box">
                <span style="width: 69px">发布企业:</span>
                <div style="width: 180px">
                  <tool-tip-node :isBtn="false" :oneLine="true" :value="item.biddingEnterprise"></tool-tip-node>
                </div>
                <!-- <span>{{ item.biddingEnterprise }}</span> -->
              </div>
              <p class="con-label">
                <span>发布日期:</span><span>{{ item.createTime }}</span>
              </p>
              <p class="con-label">
                <span>截止日期:</span><span>{{ item.bidDateline }}</span>
              </p>
              <p>
                <span>预估总价:</span>
                <span>{{ item.estimateTotalPrice }}万元</span>
              </p>
            </div>
            <div class="card-footer">
              <el-button style="width: 130px; margin-bottom: 15px" class="exportBtn" @click="getDetail(item.id)">
                {{ item.processSon === 2 ? '去投标' : '查看' }}
              </el-button>

              <p class="time-box">
                <span class="timer" v-if="item.processSon === 2">
                  <count-down :endDate="item.bidDateline" @getBidingList="getBidingList"></count-down>
                </span>
                <span v-else style="font-size: 14px">
                  {{ item.processSon | biddType }}
                </span>
              </p>
              <p>
                <i class="iconfont icon-weizhi"></i>
                <span style="font-size: 16px; margin-left: 10px">
                  {{ item.city }}
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div v-show="menutype === 2 && total" class="table_content">
        <div class="theader">
          <p style="width: 288px; margin-left: 20px">招标内容</p>
          <p style="width: 152px">招标编号</p>
          <p style="width: 248px">采购商</p>
          <p style="width: 114px">发布日期</p>
          <p style="width: 136px">投标截止日期</p>
          <p style="width: 110px">预估总价</p>
          <p style="width: 130px; text-align: center">操作</p>
        </div>
        <div class="tbody">
          <div class="tb-list" v-for="item in buyersList" :key="item.id">
            <div style="padding-top: 10px">
              <span class="card-type-succ card-type" v-if="item.processSon === 2"> 招标中 </span>
              <span class="card-type-err card-type" v-else-if="item.processSon === 50 || item.processSon === 51">
                已中标
              </span>
              <span class="card-type-warn card-type" v-else-if="item.processSon === 5"> 已入围 </span>
              <span
                class="card-type-defa card-type"
                v-else-if="item.processSon === 60 || item.processSon === 61 || item.processSon === 62"
              >
                已流标
              </span>
              <span class="card-type-defa card-type" v-else-if="item.processSon === 3"> 已截标 </span>
              <p class="metail">
                <el-tooltip effect="light" :content="item.materialInfo" placement="top">
                  <span>{{ item.materialInfo }}</span>
                </el-tooltip>
              </p>
            </div>
            <div class="con-tb" style="width: 132px">
              <el-tooltip effect="light" :content="item.biddingNo" placement="top">
                <span>{{ item.biddingNo }}</span>
              </el-tooltip>
            </div>
            <div class="con-tb" style="width: 228px">
              <el-tooltip effect="light" :content="item.biddingEnterprise" placement="top">
                <span>{{ item.biddingEnterprise }}</span>
              </el-tooltip>
            </div>
            <div class="con-tb" style="width: 104px; padding-right: 10px">
              <el-tooltip effect="light" :content="item.createTime" placement="top">
                <span>{{ item.createTime }}</span>
              </el-tooltip>
            </div>
            <div class="con-tb" style="width: 116px">
              <el-tooltip effect="light" :content="item.bidDateline" placement="top">
                <span>{{ item.bidDateline }}</span>
              </el-tooltip>
            </div>
            <div class="con-tb" style="width: 90px">{{ item.estimateTotalPrice }}万元</div>
            <div class="con-tb" style="width: 130px; padding-right: 0">
              <el-button style="width: 130px" class="exportBtn" @click="getDetail(item.id)">
                {{ item.processSon === 2 ? '去投标' : '查看' }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ footerpag: menutype === 2 }" class="pags" v-show="total">
        <element-pagination
          :Total="total"
          :Page="page"
          @getData="getPagChange"
          :pageSize="[20, 50, 100, 200]"
        ></element-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import CountDown from './CountDown.vue'
import ElementPagination from './ElementPagination.vue'
import ToolTipNode from './ToolTipNode.vue'
export default {
  components: { ElementPagination, CountDown, ToolTipNode },
  data() {
    return {
      menutype: 1,
      pages: null,
      page: 1,
      size: 20,
      total: 0,
      category: [],
      buyersList: [],
      expand: true,
      searchValue: [],
      materialList: [],
      shareScopeEnd: [],
      purchaserList: [],
      purchaserIndex: null,
      purchaserType: 'open',
      adderssList: [],
      adderssIndex: null,
      addressName: null,
      adderssType: 'open',
      statusList: [
        {
          label: '招标中',
          value: 0
        },
        {
          label: '已截标',
          value: 1
        },
        {
          label: '已入围',
          value: 2
        },

        {
          label: '已中标',
          value: 3
        },
        {
          label: '已流标',
          value: 4
        }
      ],
      statusIndex: null,
      priceList: [
        {
          label: '100万以下',
          value: 0
        },
        {
          label: '100-300万',
          value: 1
        },
        {
          label: '300-1000万',
          value: 2
        },
        {
          label: '1000万以上',
          value: 3
        }
      ],
      options: [
        {
          label: '30天内发布',
          value: '-1'
        },
        {
          label: '60天内发布',
          value: '-2'
        },
        {
          label: '90天内发布',
          value: '-3'
        }
      ],
      value: '-1',
      priceIndex: null,
      releaseDateStatus: null,
      bidDatelineStatus: null,
      estimateTotalPriceStatus: null,
      warnStyle: false,
      heights: {},
      timer: null
    }
  },
  methods: {
    // 特定时间倒计时触发
    getBidingList() {
      // 倒计时结束后 延迟一分钟请求数据
      // 若在这一分钟内还有其他招标书倒计时结束，则定时器进行重置
      this.timer = setTimeout(() => {
        this.getData()
        clearTimeout(this.timer)
      }, 60000)
    },
    // 跳转招标详情页
    getDetail(id) {
      this.$router.push('/index/biddingDetail/' + id)
    },

    // 当前页增加
    increasePage() {
      this.page++
      // 如果当前页大于总页数 设置为总页数
      if (this.page > this.pages) {
        this.page = this.pages || 1
        return false
      }
      this.getData()
    },
    // 当前页减少
    reducePage() {
      this.page--
      if (this.page === 0) {
        this.page = 1
        return false
      }
      this.getData()
    },
    timeChange() {
      this.getData()
    },
    sortChange(val) {
      if (val === 'price') {
        this.bidDatelineStatus = null
        this.releaseDateStatus = null
        if (this.estimateTotalPriceStatus === null) {
          this.estimateTotalPriceStatus = true
        } else if (this.estimateTotalPriceStatus === true) {
          this.estimateTotalPriceStatus = false
        } else {
          this.estimateTotalPriceStatus = null
        }
      } else if (val === 'end') {
        this.estimateTotalPriceStatus = null
        this.releaseDateStatus = null
        if (this.bidDatelineStatus === null) {
          this.bidDatelineStatus = true
        } else if (this.bidDatelineStatus === true) {
          this.bidDatelineStatus = false
        } else {
          this.bidDatelineStatus = null
        }
      } else if (val === 'start') {
        this.estimateTotalPriceStatus = null
        this.bidDatelineStatus = null
        if (this.releaseDateStatus === null) {
          this.releaseDateStatus = true
        } else if (this.releaseDateStatus === true) {
          this.releaseDateStatus = false
        } else {
          this.releaseDateStatus = null
        }
      }
      this.getData()
    },
    // 获取采购商list
    getBuyersList() {
      this.$https({
        method: 'post',
        url: '/biddingSquare/selectPurchaser'
      })
        .then(res => {
          if (res.code === 0) {
            this.purchaserList = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 列表格式切换
    menuTab(val) {
      this.menutype = val
    },
    // 子组件触发分页时触发
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    // 获取首页列表
    getData() {
      this.$https({
        method: 'post',
        url: '/biddingSquare/selectBidding',
        isShowLoding: false,
        data: {
          // 采购商过滤
          enterpriseId: this.purchaserIndex,
          // 招标状态过滤
          biddingStatus: this.statusIndex,
          // 交付地点过滤
          placeDelivery: this.addressName,
          // 预估总价过滤
          estimateTotalPrice: this.priceIndex,
          materials: this.category,
          bidDatelineStatus: this.bidDatelineStatus,
          releaseDateStatus: this.releaseDateStatus,
          estimateTotalPriceStatus: this.estimateTotalPriceStatus,
          timeFiltering: +this.value,
          page: this.page,
          size: this.size
        }
      })
        .then(res => {
          if (res.code === 0) {
            if (res.data === null) {
              this.buyersList = []
              this.total = 0
            } else {
              this.total = res.data.total
              this.buyersList = res.data.records
            }
            this.pages = Math.ceil(this.total / this.size)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    expandShrink() {
      // true收起状态 false 展开状态
      this.expand = !this.expand
    },
    //选择物资类别按钮
    selectMaterial() {
      this.$https({
        method: 'post',
        url: '/material/listAllMaterial',
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            // this.materialList = this.common.getTree(
            //   res.data,
            //   0,
            //   "fatherId",
            //   "id",
            //   "materialName"
            // );
            this.materialList = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //选择物资分类 一二级单选 三级多选
    changeLabel(val) {
      // 是否与上次的类型相同
      this.category = []
      let changeFlag = false
      let changeItem = null
      if (this.shareScopeEnd.length == 0) {
        this.searchValue = val
      } else {
        // 与原数组比对
        this.searchValue.forEach(item => {
          if (item[0] !== this.shareScopeEnd[0][0]) {
            // 一级标签不同
            changeFlag = true
            changeItem = item
          } else if (item[1] != this.shareScopeEnd[0][1]) {
            // 一级标签相同但是二级标签不同
            changeFlag = true
            changeItem = item
          } else if ((!item[2] && this.shareScopeEnd[0][2]) || (item[2] && !this.shareScopeEnd[0][2])) {
            changeFlag = true
            changeItem = item
          }
        })
      }
      if (changeFlag) {
        this.searchValue = []
        this.searchValue.push(changeItem)
      }
      this.shareScopeEnd = this.searchValue
      this.shareScopeEnd.forEach(item => {
        this.category.push({
          typeOneId: item[0],
          typeTwoId: item[1] || null,
          materialId: item[2] || null
        })
      })
      this.getData()
    },
    //清空物资分类
    allPenreClick() {
      this.$refs.searchCascader.$refs.panel.clearCheckedNodes()
      this.$refs.searchCascader.$refs.panel.activePath = []
      this.shareScopeEnd = []
      this.searchValue = []
      this.getData()
    },
    //选择供应商
    purchaserSelect(index) {
      this.purchaserIndex = index
      this.getData()
    },
    //供应商展开收起
    purchaserMoreBtn(type) {
      this.purchaserType = type
    },
    //选择交付地点
    adderssSelect(index, val) {
      this.adderssIndex = index
      this.addressName = val
      this.getData()
    },
    //交付地点展开收起
    adderssBtn(type) {
      this.adderssType = type
    },
    //选择招标状态
    statusSelect(index) {
      this.statusIndex = index
      this.getData()
    },
    //选择预估总价
    priceSelect(index) {
      this.priceIndex = index
      this.getData()
    }
  },
  filters: {
    // 过滤招标状态
    biddType(val) {
      switch (val) {
        case 3:
          return '已截标'
        case 5:
          return '已入围'
        case 50:
        case 51:
          return '已中标'
        case 60:
        case 61:
        case 62:
          return '已流标'
        default:
          break
      }
    }
  },
  watch: {
    expand() {
      if (this.expand) {
        this.heights = {}
      } else {
        this.heights = { height: 'auto' }
      }
    }
  },
  computed: {
    pageDisStyle() {
      return { 'pointer-events': 'none', cursor: 'not-allowed' }
    },
    pageCliStyle() {
      return { cursor: 'pointer' }
    },
    className() {
      if (this.purchaserType === 'open') {
        if (this.adderssType === 'open') {
          return 'shrink'
        } else {
          return 'boxauto'
        }
      } else {
        if (this.adderssType === 'open') {
          return 'boxauto'
        } else {
          return 'boxopen'
        }
      }
    }
  },
  mounted() {
    this.getBuyersList()
    this.selectMaterial()
    //调用公共方法获取省列表
    this.common.getAddressList('province').then(value => {
      this.adderssList = value
    })
    this.getData()
  }
}
</script>
<style scoped lang="less">
.search {
  width: 1200px;
  padding: 30px 0;
  .bidd_btn {
    width: 80px;
    padding: 4px 0 !important;
  }
  .search_header {
    /deep/.el-tag.el-tag--info {
      color: #333;
    }
    .all_genre {
      font-size: 14px;
      padding: 5px 14px;
      color: #fa7355;
      background-color: #fee3dd;
      border: 1px solid #fa7355;
      border-radius: 5px;
      cursor: pointer;
      .iconfont {
        font-size: 14px;
        margin-right: 10px;
      }
    }
    .all_genre:hover {
      color: #fff;
      background-color: #fa7355;
    }
    .icon-jiantou_you {
      margin: 0 10px;
    }
  }
  .active {
    color: #fa7355;
  }
  .sort-nav {
    height: 50px;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
    background: #ebebeb;
    .sort-icon {
      display: inline-flex;
      flex-direction: column;
      padding: 5px 0;
      margin-left: 10px;
      .el-icon-caret-top {
        margin-top: 2px;
      }
      i {
        margin-top: -5px;
      }
    }
    .nav-left {
      div {
        padding-left: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: center;
      }
      .timeselect {
        padding-left: 0;
        margin-left: 20px;
      }
    }
    .nav-left,
    .nav-right {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .nav-right {
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #d6d6d6;
      }
      .nav-pag {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        &:hover {
          color: #fa7355;
        }
      }
    }
    .icon-xiangmubiaoqian,
    .icon-bianjikuangwuxuliebiao17 {
      font-size: 24px;
    }
  }
  .boxopen {
    height: 264px;
    overflow: hidden;
  }
  .boxauto {
    height: 194px;
    overflow: hidden;
  }
  .expand {
    height: auto;
    // overflow: hidden;
  }
  .shrink {
    height: 124px;
    overflow: hidden;
  }
  .search-btn {
    margin: 10px 0 30px 0;
    .openBtn {
      margin-top: 10px;
    }
  }
  .search_purchaser,
  .search_adderss,
  .search_price,
  .search_status {
    width: 100%;
    display: flex;
    justify-content: left;
    margin-top: 12px;
    .label {
      width: 80px;
      i {
        font-size: 16px;
        font-style: normal;
      }
    }
    .nav {
      width: 1120px;
      position: relative;
      .open {
        width: 1020px;
        height: 30px;
        overflow: hidden;
      }
      .packUp {
        width: 1020px;
        height: 100px;
        overflow-y: auto;
      }
      span {
        display: inline-block;
        font-size: 14px;
        margin-left: 30px;
        margin-bottom: 10px;
        padding: 2px 7px;
        cursor: pointer;
      }
      span:hover {
        color: #fa7355;
      }
      .on {
        border-radius: 5px;
        background-color: #fa7355;
        color: #fff !important;
      }
      .el-button {
        position: absolute;
        right: 0;
        top: 0;
      }
      .iconfont {
        margin-left: 5px;
      }
    }
  }
}
.content {
  .theader {
    height: 50px;
    line-height: 50px;
    border: 1px solid #d6d6d6;
    display: flex;
  }
  .tbody {
    .tb-list {
      height: 92px;
      border-bottom: 1px solid #ebebeb;
      display: flex;
      .metail {
        width: 288px;
        height: 21px;
        line-height: 21px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 12px;
      }
      .con-tb {
        line-height: 106px;
        height: 92px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .card-type {
        // display: inline-block;
        // height: 20px;
        padding: 4px 10px;
        color: #fff;
      }
      .card-type-succ {
        background-color: #30c776;
      }
      .card-type-err {
        background-color: #ff0000;
      }
      .card-type-warn {
        background: #ff9f0f;
      }
      .card-type-defa {
        background: #999999;
      }
    }
  }
  .list-content {
    width: 1200px;

    .four {
      margin-right: 0;
    }
    .list_itembox {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .card-list {
    // height: 396px;
    width: 283px;
    margin-bottom: 20px;
    margin-right: 20px;
    border: 1px solid #d6d6d6;
    border-radius: 8px 8px 0 0;
    &:hover {
      box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.35);
      transform: translate(0, -1px);
    }
    .card-header {
      display: flex;
      align-items: center;
      // height: 48px;
      border-bottom: 1px solid #d6d6d6;
      border-radius: 8px 8px 0 0;
      background: #f2f3f7;
      .card-type {
        // display: inline-block;
        // height: 20px;
        padding: 4px 10px;
        color: #fff;
        margin-right: 10px;
      }
      .card-type-succ {
        background-color: #30c776;
      }
      .card-type-err {
        background-color: #ff0000;
      }
      .card-type-warn {
        background: #ff9f0f;
      }
      .card-type-defa {
        background: #999999;
      }
      .materialinfo {
        display: inline-block;
        width: 168px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .card-header,
    .card-main,
    .card-footer {
      padding: 16px;
    }
    .card-footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .icon-shijian,
      .icon-weizhi {
        font-size: 20px;
      }
    }
    .time-box {
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
      width: 100%;
      // margin-left: 50%;
      // transform: translateX(-50%);
    }
    .card-main {
      padding-bottom: 0;
      .con-label {
        margin-bottom: 10px;
      }
      .company_label_box {
        display: flex;
        align-items: center;
      }
    }
  }
}
.nocontent_bg {
  height: 396px;
}
</style>
<style lang="less">
#home {
  .pags {
    padding-bottom: 20px;
    .el-pagination {
      margin-top: 10px;
    }
  }
  .footerpag {
    margin-top: 20px;
  }
}
.el-select-dropdown__item.selected {
  color: #fa7355;
}
</style>
